Skip to content

fix(ui-alerts,console): remove Alert live-region role warning - #2664

Open
ToMESSKa wants to merge 1 commit into
masterfrom
INSTUI-5131-alert-wants-role-alert-added-to-live-region
Open

fix(ui-alerts,console): remove Alert live-region role warning#2664
ToMESSKa wants to merge 1 commit into
masterfrom
INSTUI-5131-alert-wants-role-alert-added-to-live-region

Conversation

@ToMESSKa

@ToMESSKa ToMESSKa commented Jul 29, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

INSTUI-5131

ISSUE:

  • Alert warns that your live region must have role="alert", but role="alert" means assertive per WAI-ARIA, so even when you'd set liveRegionPoliteness="polite" (non-assertive), you got a warning asking for role="alert". It was likely a leftover before the liveRegionPoliteness prop was added. GitHub issue: Alert wants role="alert" added to live region #2276

Setting role="alert" is equivalent to setting aria-live="assertive" and aria-atomic="true". [...] Dynamic changes that are less urgent should use a less aggressive method, such as including aria-live="polite" or using an other live region role like status.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role

TEST PLAN:

  • run it locally
  • add this to packages/__docs__/src/index.html after line 4 (webpack 5 doesn't provide process in the browser so typeof process resolves to "undefined" in packages/console/src/console.ts and log messages are not emitted)
     window.process = window.process || { env: {} }
    </script>
    <script>
  • test this example, it should not emit a warning
<div>
  <div className="alerts-container" id="live-region"></div>
  <Alert
    variant="info"
    renderCloseButtonLabel="Dismiss alert"
    liveRegion={() => document.getElementById("live-region")}
    liveRegionPoliteness="polite"
  >
    Just an alert.
  </Alert>
</div>
  • if you revert the fix, the warning should reappear

@ToMESSKa ToMESSKa self-assigned this Jul 29, 2026
@github-actions

github-actions Bot commented Jul 29, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor
PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://instructure.design/pr-preview/pr-2664/

Built to branch gh-pages at 2026-07-31 12:17 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

github-actions Bot pushed a commit that referenced this pull request Jul 29, 2026
@ToMESSKa
visual-regression: PR #2664 (f3c0534) f3c0534
212ac60
@github-actions

github-actions Bot commented Jul 29, 2026

Copy link
Copy Markdown
Contributor

Visual regression report

⚠️ Changes detected.

Status Count
Unchanged 0
Changed 1
New 96
Removed 32

📊 View full report

Diff images (33)

alert.png — baseline no longer produced

avatar.png — baseline no longer produced

badge.png — baseline no longer produced

billboard.png — baseline no longer produced

breadcrumb.png — baseline no longer produced

button-and-derivatives.png — baseline no longer produced

byline.png — baseline no longer produced

calendar.png — baseline no longer produced

checkbox.png — baseline no longer produced

checkboxgroup.png — baseline no longer produced

colorpicker.png — baseline no longer produced

contextview.png — baseline no longer produced

custom-and-lucide-icons.png — baseline no longer produced

dateinput-dateinput2.png — baseline no longer produced

datetimeinput.png — baseline no longer produced

diff-demo.png — 6324 pixels differ

drilldown.png — baseline no longer produced

filedrop.png — baseline no longer produced

form-errors.png — baseline no longer produced

heading.png — baseline no longer produced

img.png — baseline no longer produced

link.png — baseline no longer produced

menu.png — baseline no longer produced

metric-pill-tag-timeselect-text.png — baseline no longer produced

options.png — baseline no longer produced

pagination.png — baseline no longer produced

progressbar.png — baseline no longer produced

select-simpleselect.png — baseline no longer produced

table.png — baseline no longer produced

tabs.png — baseline no longer produced

tooltip.png — baseline no longer produced

treebrowser.png — baseline no longer produced

view.png — baseline no longer produced

Baselines come from the visual-baselines branch. They refresh on every merge to master.

@ToMESSKa ToMESSKa changed the title fix(ui-alerts,console): correct Alert live-region role warning and fi… fix(ui-alerts,console): correct Alert live-region role warning Jul 30, 2026
@ToMESSKa ToMESSKa changed the title fix(ui-alerts,console): correct Alert live-region role warning fix(ui-alerts,console): remove Alert live-region role warning Jul 30, 2026
@ToMESSKa
ToMESSKa force-pushed the INSTUI-5131-alert-wants-role-alert-added-to-live-region branch from 53103e2 to 240bcda Compare July 31, 2026 12:12
github-actions Bot pushed a commit that referenced this pull request Jul 31, 2026
@ToMESSKa
visual-regression: PR #2664 (7dfe5f2) 7dfe5f2
ee85777
@ToMESSKa
ToMESSKa marked this pull request as ready for review July 31, 2026 12:35
@ToMESSKa
ToMESSKa requested a review from matyasf July 31, 2026 12:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@matyasf matyasf Awaiting requested review from matyasf

At least 2 approving reviews are required to merge this pull request.

Assignees

@ToMESSKa ToMESSKa

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@ToMESSKa